<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <base href="">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        h1,
        h2,
        h3 {
            background: grey;
            color: white;
        }

        hgroup>h1 {
            margin-bottom: 0px;
        }

        hgroup>h2 {
            background: grey;
            color: white;
            font-size: 1em;
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <!-- h1~h3元素 三级标题-->
    <!-- 使用hgroup元素将几个标题作为一个整体处理 -->

    <hgroup>
        <h1>Fruits I like</h1>
        <h2>How I Learned to Love Citrus</h2>
    </hgroup>
    <!-- h1,h2生成带子标题的标题 ；无法区分同级的h2标题 -->
    <!-- <h2>How I Learned to Love Citrus</h2> -->
    I like apples and oranges.

    <h2>Additional fruits</h2>
    I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.

    <h3>More information</h3>
    You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.

    <h1>Activities I like</h1>
    <p>I like to swim, cycle and run. I am in training for my first triathlon,
        but it is hard work.</p>
    <h2>Kinds of Triathlon</h2>
    There are different kinds of triathlon - sprint, Olympic and so on.
    <h3>The kind of triathlon I am aiming for</h3>
    I am aiming for Olympic. which consists of the following:
    <ol>
        <li>1.5km swim</li>
        <li>40km cycle</li>
        <li>10km run</li>
    </ol>
</body>

</html>